<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态伪类</title>

    <style type="text/css">
        a:link {
            text-decoration: none;
            color: blue;
        }
        
        a:visited {
            color: gray;
        }
        
        a:hover {
            color: green;
        }
        
        a:active {
            text-decoration: line-through;
            color: red;
        }
        
        .test {
            height: 200px;
            width: 300px;
            border: 1px solid blue;
            transition: all 500ms linear;
        }
        
        .test:hover {
            width: 500px;
            height: 300px;
        }
        
        input[type=text]:focus {
            border: 5px solid blue;
            outline-color: red;
        }
    </style>

</head>

<body>

    <h4>与超链接有关的伪类</h4>
    <a href="http://www.sohu.com" target="_blank" tabindex="1">搜狐</a>
    <a href="http://www.163.com" target="_blank" tabindex="2">网易</a>
    <a href="http://www.sina.com.cn" target="_blank" tabindex="3">新浪</a>
    <a href="http://www.china.com" target="_blank" tabindex="4">中华网</a>
    <a href="http://www.cctv.com" target="_blank" tabindex="5">央视</a>

    <h4>:hover</h4>
    <div class="test"></div>

    <script type="text/javascript">
        function fn1(me) {
            console.log(me, '失去焦点');
        }

        function fn2(me) {
            console.log(me, '获得焦点');
        }
    </script>

    <h4>:focus</h4>
    <input type="text" onfocus="fn2(this)" onblur="fn1(this)">

</body>

</html>